<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .datepicker {
            display: inline-block;
            position: relative;
            width: 280px;
            height: 30px;
        }

        .datepicker-box {
            width: 280px;
            height: 320px;
            position: absolute;
            left: 0;
            top: 30px;
        }

        .datepicker-box .datepicker-header {
            width: 280px;
            height: 40px;
            display: flex;
        }

        .datepicker-header .header-prev {
            flex: 1;
        }

        .datepicker-header .header-next {
            flex: 1;
        }

        .datepicker-header .header-content {
            flex: 3;
        }

        .datepicker-header div {
            text-align: center;
            line-height: 40px;
            height: 40px;
            background-color: black;
            color: burlywood;
        }

        .datepicker-title {
            width: 280px;
            height: 40px;
        }

        .datepicker-title .item,
        .datepicke-content .item {
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: blanchedalmond;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>

<body>

    开始时间 <input id="start" />

</body>
<script>

    Date.prototype.allDays=function(){//当时间的月份有多少天
        let  tempDate  = new Date("2000-01-01");//
        tempDate.setFullYear(this.getFullYear());//2021-10-31
        tempDate.setMonth(this.getMonth()+1);//2021-11-31
        tempDate.setDate(0);//当前月的最后一天
        return  tempDate.getDate();//当前月的最后一天是几号  当前月就有多少天
    }
    Date.prototype.prevDays=function(){//获取上一个月有多少天
        let tempDate = new Date("2000-01-01")//临时时间用01号
        tempDate.setFullYear(this.getFullYear());
        tempDate.setMonth(this.getMonth());//当前月的一号
        tempDate.setDate(0);
        return  tempDate.getDate();
    }
    Date.prototype.firstDayWeek= function(){//当前月的第一天是星期几
        let  tempDate  = new Date("2000-01-01");//
        tempDate.setFullYear(this.getFullYear());//2021-01-01
        tempDate.setMonth(this.getMonth());//2021-10-01
        return  tempDate.getDay();

    }




    $.fn.extend({
        datePicker: function () {
            this.parent = $("<div class='datepicker'>");
            $(this).wrap(this.parent);
            this.datePickerBox = $(`<div class="datepicker-box">`);
            $(this).parent().append(this.datePickerBox);

            this.datePickerBoxHeader = $(`<div class="datepicker-header">`);
            this.datePickerBox.append(this.datePickerBoxHeader);

            this.datePickerBoxHeaderPrevBtn = $(` <div class="header-prev">上</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderPrevBtn);

            this.datePickerBoxHeaderContext = $(`<div class="header-content">2021-10</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderContext);

            this.datePickerBoxHeaderNextBtn = $(`<div class="header-next">下</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderNextBtn);

            this.datePickerBox.append(` <div class="datepicker-title">
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
                <div class="item">日</div>
            </div>`);
            this.datePickerBoxContent = $(`<div class="datepicke-content">`);
            this.datePickerBox.append(this.datePickerBoxContent);



            


        }
    })


    $("#start").datePicker();



</script>

</html>